<template>
    <ul class="organize-sub-category-list" >
        <li :class="{active: select === i}" v-for="(item, i) in list" :key="item.OrgID" >
            <div class="title" @click.stop="titleClick(item)">
                <span>{{item.OrgFullName}}</span>
                <div v-if="item.BranchOrg.length > 0" class="icon" @click.stop="itemClick(item, i)"></div>
            </div>
            <sub-category v-if="item.BranchOrg.length > 0"
                          :list="item.BranchOrg"
                          @item-click="itemClick1" />
        </li>
    </ul>
</template>

<script>
    export default {
        name: "SubCategory",
        data() {
            return {
                select: undefined
            }
        },
        props: {
            list: {
                type: Array,
                default() {
                    return [];
                }
            }
            // preselect: Number
        },
        created() {
            // this.select = this.preselect;
        },
        methods: {
            itemClick(item, i) {
                if(this.select !== i) {
                    this.select = i;
                    // this.$emit('item-click', item);
                } else {
                    this.select = undefined;
                }
            },
            itemClick1(item) {
                this.$emit('item-click', item);
            },
            titleClick(item) {
                this.$router.push({path: '/searchResult', query: {orgid: item.OrgID, subTitle: item.OrgShortName, page: '3'}});
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../../assets/scss/define";
    .organize-sub-category-list {
        text-align: left;
        > li {
            margin: 2px 0;
            transition: all 0.5s;
            &:nth-of-type(even) {
                > .title {
                    background-color: rgba(white, 0.5);
                }
            }
            > .title {
                height: 45px;
                width: 100%;
                display: flex;
                align-items: center;
                position: relative;
                background-color: #ffffff;
                padding-left: 5px;

                .icon {
                    width: 50px;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    right: 0;

                    &::after {
                        content: '';
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transform: translateY(-50%) rotate(0);
                        background-image: url("../../../assets/imgs/arrow.svg");
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
                        transition: transform 0.3s;
                    }
                }
            }

            > ul {
                display: none;
                padding-left: 10px;
            }

            &.active {
                > .title {
                    color: $base-color;

                    .icon::after {
                        transform: translateY(-50%) rotate(90deg);
                    }
                }

                > ul {
                    display: block;
                }
            }
        }
    }
</style>
